Sigma Web Development

📒 Notes for Lecture 12: Pure HTML Media Player

• Navigation Structure:
  • Used a semantic <header> with <nav> containing a list of links:

    <header>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#audio">Audio</a></li>
          <li><a href="#video">Video</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

• Home Section:
  • Wrapped in <section id="home"> with:

    <section id="home">
      <h1>Hello,</h1>
      <h2>This is a Simple HTML Based Media Player</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.…</p>
    </section>

• Audio Section (<section id="audio">):
  • Contains three <div> blocks with IDs: funny, scary, suspense.
  • Each block embeds audio files using:

    <audio src="./Assests/Audios/Squid Game/favorite.mp3" controls preload="metadata"></audio>

  • controls adds play/pause/volume UI; preload="metadata" loads metadata only.
• Video Section (<section id="video">):
  • Header: <h1 class="headline">Video Section</h1>.
  • Three nested <div> blocks: harry, dhruv, itech.
  • Each embeds six YouTube iframes, each sized width="230" height="150". Example:

    <iframe width="230" height="150"
      src="https://www.youtube.com/embed/kqU2O7Kw_c8?si=INJqN5zt2lE71uH5"
      title="YouTube video player" frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

• About Section (<section id="about">):
  • Uses a Flex container to align an image and text side by side:

    <div class="info">
      <img src="./Assests/Images/image.jpg" alt="Logo" class="logo">
      <div class="text">
        <h2>Information About Us</h2>
        <p>Lorem ipsum dolor sit amet,…</p>
      </div>
    </div>

  • Image styled to max-width: 20% with rounded corners; text block width at 60%.
• Contact Section (<section id="contact">):
  • Contains a form with fields:
    • Name (type="text") – required
    • Email (type="email", pattern for email format) – required
    • City (pattern="[A-Za-z\s]+") – required
    • Phone Number (pattern="\d{12}") – required
    • Pincode (pattern="\d{6}") – required
    • Message (<textarea>) – required
  • Submit button: <input type="submit" value="Submit">.
• Footer:
  • Simple footer with copyright and portfolio link:

    <footer>
      © 2025 All rights reserved. Designed by 
      <a href="https://prashant-saini-22.vercel.app/" target="_blank">Prashant Saini</a>
    </footer>

• CSS Styling (style.css):
  • Sticky nav bar with dark background, white text, and purple hover.
  • Heading colors: h1 { color: darkslateblue; }, h2 { color: #4f1d1d; }.
  • Each section has min-height: 100vh; for full viewport coverage.
  • Section backgrounds:
    • #home { background-color: aqua; }
    • #audio { background-color: lightcoral; }
    • #video { background-color: gray; }
    • #about { background-color: lightblue; }
    • #contact { background-color: lightcyan; }
  • .info { display: flex; align-items: center; gap: 40px; } for About layout.
  • .logo { max-width: 20%; border-radius: 10px; } for the About image.